<template>
  <div class="quick-add">
    <!-- 组件头部，包含标题和快捷键提示 -->
    <div class="quick-add-header">
      <h2 class="section-title">快速添加</h2>
      <div class="shortcuts-hint">
        <el-text size="small" type="info">
          按 Enter 提交，Ctrl+B 聚焦输入框
        </el-text>
      </div>
    </div>
    
    <!-- 添加表单区域 -->
    <div class="add-form">
      <!-- 标题输入行 -->
      <div class="form-row">
        <el-input
          ref="titleInputRef"
          v-model="form.title"
          placeholder="输入待办事项..."
          size="large"
          clearable
          @keyup.enter="handleSubmit"
          @keyup.ctrl.n="focusInput"
          class="title-input"
        >
          <template #prefix>
            <el-icon><Edit /></el-icon>
          </template>
        </el-input>
      </div>
      
      <!-- 日期时间选择行 -->
      <div class="form-row date-time-row">
        <!-- 日期选择区域 -->
        <div class="date-section">
          <!-- 快速日期选择按钮 -->
          <div class="quick-dates">
            <el-button 
              v-for="dateOption in dateOptions"
              :key="dateOption.value"
              :type="form.date === dateOption.date ? 'primary' : 'default'"
              size="small"
              @click="handleDateSelect(dateOption)"
              class="date-btn"
            >
              {{ dateOption.label }}
            </el-button>
          </div>
          
          <!-- 日期选择器 -->
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            size="small"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            class="date-picker"
          />
        </div>
        
        <!-- 时间选择区域 -->
        <div class="time-section">
          <el-time-select
            v-model="form.time"
            start="00:00"
            step="00:15"
            end="23:45"
            placeholder="选择时间"
            size="small"
            class="time-picker"
          />
        </div>
        
        <!-- 提交按钮 -->
        <el-button 
          type="primary" 
          size="small"
          :loading="loading"
          @click="handleSubmit"
          class="submit-btn"
        >
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 导入Vue3组合式API
import { ref, reactive, onMounted, nextTick } from 'vue'
// 导入ElementPlus图标
import { Edit, Plus } from '@element-plus/icons-vue'
// 导入日期工具函数
import { getToday, getTomorrow, getDayAfterTomorrow, getNextHour, formatDate } from '../utils/date'
// 导入ElementPlus消息组件
import { ElMessage } from 'element-plus'

/**
 * 快速添加待办事项组件
 * 提供便捷的待办事项添加功能，支持快捷键操作
 */
export default {
  name: 'QuickAdd',
  components: {
    Edit,
    Plus
  },
  // 定义组件向父组件发送的事件
  emits: ['add-todo'],
  setup(props, { emit }) {
    // 标题输入框引用
    const titleInputRef = ref()
    // 提交加载状态
    const loading = ref(false)
    
    // 表单数据
    const form = reactive({
      title: '', // 待办事项标题
      date: formatDate(getToday()), // 截止日期，默认今天
      time: getNextHour() // 截止时间，默认下一个整点
    })
    
    // 快速日期选择选项
    const dateOptions = [
      {
        label: '今天',
        value: 'today',
        date: formatDate(getToday())
      },
      {
        label: '明天',
        value: 'tomorrow', 
        date: formatDate(getTomorrow())
      },
      {
        label: '后天',
        value: 'dayAfterTomorrow',
        date: formatDate(getDayAfterTomorrow())
      }
    ]
    
    /**
     * 处理快速日期选择
     * @param {Object} dateOption - 选中的日期选项
     */
    const handleDateSelect = (dateOption) => {
      form.date = dateOption.date
    }
    
    /**
     * 处理表单提交
     * 验证输入并向父组件发送添加事件
     */
    const handleSubmit = async () => {
      // 验证标题是否为空
      if (!form.title.trim()) {
        ElMessage.warning('请输入待办事项标题')
        focusInput()
        return
      }
      
      loading.value = true
      
      try {
        // 向父组件发送添加事件
        await emit('add-todo', {
          title: form.title.trim(),
          dueDate: form.date,
          dueTime: form.time
        })
        
        // 重置表单到初始状态
        form.title = ''
        form.date = formatDate(getToday())
        form.time = getNextHour()
        
      } catch (error) {
        console.error('添加失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    /**
     * 聚焦到标题输入框
     * 用于快捷键操作和提升用户体验
     */
    const focusInput = () => {
      nextTick(() => {
        titleInputRef.value?.focus()
      })
    }
    
    /**
     * 处理全局快捷键
     * Ctrl+B: 聚焦到输入框
     */
    const handleGlobalKeydown = (event) => {
      if (event.ctrlKey && event.key === 'b') {
        focusInput()
        event.preventDefault()
      }
    }
    
    // 组件挂载时的初始化操作
    onMounted(() => {
      // 自动聚焦到输入框
      focusInput()
      // 注册全局快捷键监听
      document.addEventListener('keydown', handleGlobalKeydown)
    })
    
    // 暴露给模板使用的数据和方法
    return {
      titleInputRef,
      loading,
      form,
      dateOptions,
      handleDateSelect,
      handleSubmit,
      focusInput
    }
  }
}
</script>

<style scoped>
/* 快速添加组件容器样式 */
.quick-add {
  background: var(--el-bg-color);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

/* 组件头部样式 */
.quick-add-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* 标题样式 */
.section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

/* 快捷键提示样式 */
.shortcuts-hint {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

/* 表单容器样式 */
.add-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 表单行样式 */
.form-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 标题输入框样式 */
.title-input {
  flex: 1;
}

/* 日期时间行样式 */
.date-time-row {
  flex-wrap: wrap;
}

/* 日期选择区域样式 */
.date-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* 快速日期按钮组样式 */
.quick-dates {
  display: flex;
  gap: 4px;
}

/* 快速日期按钮样式 */
.date-btn {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 40px;
}

/* 日期选择器样式 */
.date-picker {
  width: 140px;
}

/* 时间选择区域样式 */
.time-section {
  display: flex;
  align-items: center;
}

/* 时间选择器样式 */
.time-picker {
  width: 120px;
}

/* 提交按钮样式 */
.submit-btn {
  padding: 8px 16px;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .date-time-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .quick-dates {
    justify-content: center;
  }
  
  .date-picker,
  .time-picker {
    width: 100%;
  }
}
</style> 